<template>
	<div style="height:100%;width:100%;" ref="MapView">
		<div class="control">
			显示隐藏： <i-switch v-model="show"></i-switch>
		</div>
	</div>
</template>
<script>
	import simpleMap from '@best/libs-cli/simpleMap/index.js'
	var map = null;
	var clouds = null;

	export default {
		data() {
			return {
				show: false,
			}
		},
		watch: {
			show(val) {
				if (val) {
					clouds = new Cesium.clouds(map);;
				} else if (clouds) {
					clouds.destroy();
					clouds = null;
				}
			}
		},
		mounted() {
			map = simpleMap.initMap(this.$refs.MapView, { mapOptions: { senceMode: '3D' } });
			map.addProviders([{
				"type": "TD",
				"url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
			}]);


		},
		beforeDestroy() {
			// 页面被注销时，销毁地图
			map && map.destroy();
			clouds && clouds.destroy();
		}
	}
</script>
<style scoped>
.MapView {
	width: 100%;
	height: 100%;
}

.layout {
	height: 100%;
	width: 100%;
}

.control {
	position: absolute;
	top: 20px;
	left: 20px;
	background: rgba(0, 0, 0, 0.4);
	padding: 10px 20px;
	color: #fff;
	z-index: 4;
}
.title {
	color: #fff;
}
.Text {
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	padding: 10px;
}
.itemBox {
	margin-bottom: 5px;
}
</style>